<template>
<!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/Materials/ShowMaterialRequisition">物资领用</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>新增领用申请</el-breadcrumb-item>
  </el-breadcrumb>
</div>

<!--添加表单-->
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>

    <el-form-item label="标题" prop="title">
      <el-input v-model="form.title" placeholder="请输入领用标题" />
    </el-form-item>

    <el-form-item label="用途描述" prop="usageDescription">
      <el-input v-model="form.usageDescription" :rows="3" type="textarea" placeholder="请输入用途描述"/>
    </el-form-item>

    <el-form-item label="备注" prop="materialRequisitNotes">
      <el-input v-model="form.materialRequisitNotes" :rows="3" type="textarea" placeholder="请输入备注"/>
    </el-form-item>

    <el-form-item label="选择领用物品" prop="materialStoreId">
      <el-select v-model="form.materialStoreId" placeholder="请选择要领用的物品" style="width: 430px;">
        <el-option v-for="item in StoreData" :key="item.materialStoreId" :label="item.nameOfGoods" :value="item.materialStoreId"></el-option>
      </el-select>
       <el-button type="primary" @click="AddInfo()">添加</el-button>
    </el-form-item>

    <div style="margin-left: 95px;" v-if="sotreDataListByIdData.length>0">
      <table border style="border-collapse: collapse;width: 100%;background-color:gainsboro;text-align: center;" >
      <thead></thead>
      <tbody>
        <tr>
          <td>货物名称</td>
          <td>类型</td>
          <td>材质</td>
          <td>规格</td>
          <td>产地</td>
          <td>仓库数量</td>
          <td>领用数量</td>
          <td>操作</td>
        </tr>

        <tr v-for="(item,index) in sotreDataListByIdData" :key="item.materialStoreId">
          <td>{{ item.nameOfGoods }}</td>
          <td>{{ item.materialStoreType }}</td>
          <td>{{ item.material }}</td>
          <td>{{ item.specifications }}</td>
          <td>{{ item.countryName }}</td>
          <td>{{ item.number }}</td>
          <td>
            <el-input v-model="NumberArray[index]" placeholder="请输入领用数量"></el-input>
          </td>
          <td>
            <el-link target="_blank" @click="deleteInfo(item.materialStoreId)">删除</el-link>
          </td>
        </tr>
      </tbody>
    </table>
    </div>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="resetForm">取消</el-button>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import {useRoute,useRouter} from 'vue-router'
import { number } from 'echarts';

const route = useRoute();
const router = useRouter();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

onMounted(() => {
  //领用物品列表
  getStoreList()
})

//定义数量数组
const NumberArray:any=ref([])

const materialStoreId:any=ref('')
const form: any = reactive({
  // companyID: '',
  // user_Id:'',
  materialStoreId:'',
   title: "",
   usageDescription: "",
  materialRequisitNotes: "",
  // collectionDate:'',
  approvalStatus: 10,
  // recipient:'',
  materialRequisitionDtos:[]
})


  //领用列表--已通过审核
  const StoreData:any=ref([])
  const getStoreList = () => {
  
    axios.get('/mread/api/ShowMaterialStore/GetMaterialStoreName').then(res=>{
      console.log(res);
      StoreData.value = res.data.data;
    }).catch(err=>{
      console.log(err);
      
    })    
  }

//校验
const rules = reactive<FormRules>({
  title: [
    { required: true, message: '请输入领用标题', trigger: 'blur' },
  ],
  usageDescription: [
    { required: true, message: '请输入用途描述', trigger: 'blur' },
  ],
})

//点击添加后根据ID查询
const sotreDataListByIdData:any=ref([])
const AddInfo = () => {
  axios.get('/mread/api/ShowMaterialStore/GetMaterialStoreByIdList?MaterialStoreId='+form.materialStoreId).then(res=>{
    console.log(res);
    sotreDataListByIdData.value.push(res.data.data[0]) ;

  }).catch(err=>{
    console.log(err);
    
  })    
}

//删除多余行
const deleteInfo = (index:number) => {
  sotreDataListByIdData.value = sotreDataListByIdData.value.filter((x: any) => x.materialStoreId != index)
  //console.log(sotreDataListByIdData.value);
  
}

//提交
//添加数组
const MaterialsArray:any=ref([])
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      MaterialsArray.value = sotreDataListByIdData.value.map((x: any, index: any) => ({
        ...x,
        number: NumberArray.value[index]
      }));
      MaterialsArray.value.map((x:any)=>{
        let dataInfo = {
          materialStoreId: x.materialStoreId,
          QuantityReceived: x.number,
        };
        form.materialRequisitionDtos.push(dataInfo)
      })

      // let command: any = {
      //   title: form.title,
      //   usageDescription: form.usageDescription,
      //   recipient: form.recipient,
      //   materialRequisitNotes: form.materialRequisitNotes,
      //   approvalStatus: 10,
      //   approver: form.approver,
      //   materialRequisitionDtos:[]
      // }
      // MaterialsArray.value.map((x:any)=>{
      //   let dataInfo = {
      //     materialStoreId: x.materialStoreId,
      //     QuantityReceived: x.number,
      //   };
      //   command.materialRequisitionDtos.push(dataInfo)
      // })
                        
      axios.post('/mwrite/api/MaterialRequisition/AddMaterialRequisition',form).then(res => {
        console.log(res);
        if (res.data.code > 0) {
          ElMessage.success("添加成功!")
          router.push('/Materials/ShowMaterialRequisition')
        } else {
          ElMessage.error("添加失败!")
          return
        }

      }).catch(err => {
        console.log(err);

      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//取消
const resetForm = () => {
router.push('/Materials/ShowMaterialRequisition')
}


</script>

<style scoped>

</style>